<script setup lang="ts">
import { reactive, ref, computed } from "vue";
// import {
//   HxqDateRangeTwo,
//   HxqDateRangeSingle,
//   //   HxqDateCalendar,
// } from "vue-mobile-hxq";
import { apiBaseCol } from "assets/js/constant.js";
import dataRangeDemo from "./components/dataRangeDemo.vue";
const searchTime2 = ref([new Date(2013, 5, 4), new Date(2013, 7, 8)]);

const dataSource = reactive([
  {
    name: "v-model",
    param: "string",
    desc: "双向绑定值",
  },
]);

const dataSource2 = reactive([
  {
    name: "v-model",
    param: "string",
    desc: "双向绑定值",
  },
  {
    name: "minDate",
    param: "Date",
    desc: "最小可选日期",
  },
  {
    name: "maxDate",
    param: "Date",
    desc: "最大可选日期",
  },
  {
    name: "height",
    param: "string",
    desc: "string",
  },
  {
    name: "showTitle",
    param: "boolean",
    desc: "是否展示标题",
  },
  {
    name: "rowHeight",
    param: "number",
    desc: "日历行高",
  },
]);


const searchTime1 = ref(["2013/03/01", "2013/06/01"]);
</script>
<template>
  <div class="container">
    <div class="left-box">
      <div class="public-flex-box">
        <div class="public-title-bold">介绍</div>
        <div class="public-content-text">
          时间范围选择，用在筛选列表、表单等情况
        </div>
      </div>
      <div class="public-flex-box">
        <div class="public-title-bold">引入</div>

        <pre class="public-content-code">
        <code
          class="language-css"
        >
    import { HxqDateRangeSingle } from "vue-mobile-hxq";
    import { HxqDateRangeTwo } from "vue-mobile-hxq";
    import { HxqDateCalendar } from "vue-mobile-hxq";
        </code></pre>
      </div>
      <div class="public-outside-title">代码展示</div>
      <div class="public-flex-box">
        <div class="public-title-bold">单个时间选择时间范围筛选</div>

        <div class="public-content-text">
          单个时间选择时间范围，初始时间不能大于结束时间。赋默认值。
        </div>

        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
    import { HxqDateRangeSingle } from "vue-mobile-hxq";
    &lt;hxq-date-range-single v-model="searchTime1"> &lt;/hxq-date-range-single>
        </code></pre>
      </div>

      <div class="public-flex-box">
        <div class="public-title-bold">以日历的形式选择时间范围筛选</div>

        <div class="public-content-text">
          单个时间选择时间范围，初始时间不能大于结束时间。赋默认值。
        </div>

        <pre class="public-content-code">
        <code
          id="code-2"
          class="language-markup line-numbers"
          style="text-align: left"
        >
    import { HxqDateRangeSingle } from "vue-mobile-hxq";
    &lt;hxq-date-range-two
        :minDate="new Date(1999, 0, 1)"
        v-model="searchTime2"
    >&lt;/hxq-date-range-two>
        </code></pre>
      </div>
      <div class="public-flex-box">
        <div class="public-title-bold">单个时间选择范围参数</div>
        <a-table
          :dataSource="dataSource"
          :columns="apiBaseCol"
          :pagination="false"
        />
        <div class="public-title-bold">以日历形式选择范围参数</div>
        <a-table
          :dataSource="dataSource2"
          :columns="apiBaseCol"
          :pagination="false"
        />
      </div>
    </div>
    <div class="right-box">
      <dataRangeDemo></dataRangeDemo>
    </div>
  </div>
</template>

<style lang="scss">
.container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;

  .left-box {
    width: calc(72% - 10px);
    height: 100%;
    overflow-y: auto;
  }
  .right-box {
    width: calc(28% - 10px);
    height: 100%;
    background-color: #fff;
    border-radius: 24px;
  }
}
.van-overlay {
  position: absolute;
}
.van-popup {
  position: absolute;
  width: 100%;
  right: 24px;
}
</style>

 